<template>
  <div class="title-warp" mt12>
    <div class="item">
      <dv-decoration-10 style="width: 90%; height: 5px" class="line" />
    </div>
    <div class="item">
      <div class="title-box">
        <div class="f1">
          <dv-decoration8 />
        </div>
        <div class="f1" flex-center>
          <dv-decoration-11 style="width: 200px; height: 60px">
            <div color-green font-600 bg="~ dark/0">XXXX大屏展示</div>
          </dv-decoration-11>
        </div>
        <div class="f1">
          <dv-decoration8 :reverse="true" />
        </div>
      </div>
    </div>
    <div class="item" flex-end>
      <dv-decoration-10
        style="width: 90%; height: 5px; transform: rotate(180deg)"
        class="line"
      />
    </div>
  </div>
</template>

<script setup></script>
<style scoped lang="scss">
.title-warp {
  display: flex;
  width: 100%;
  height: 50px;
  justify-content: space-between;

  .item {
    width: 100%;
    height: 50px;
  }
}

.item:nth-child(1) {
  flex: 0 1 30%;
}

.item:nth-child(2) {
  display: flex;
  flex: 0 1 40%;
  width: 100%;
}

.item:nth-child(3) {
  flex: 0 1 30%;
}

.title-box {
  display: flex;
  align-items: center;
  width: 100%;
  .f1 {
    flex: 1;
    width: 100%;
    height: 50px;
  }
  .title {
    width: 100%;
    @apply text-21px text-primary flex-center;
  }
}

.line {
  @apply mt-4;
}
</style>
